<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>demo</title>
    <link href="../css/qs.css" rel="stylesheet" type="text/css" />
    <link href="../css/qs_ui.css" rel="stylesheet" type="text/css" />
    <link href="../css/quote2_dli.css" rel="stylesheet" type="text/css" />
    <link href="uidemo.css" rel="stylesheet" type="text/css" />
</head>
<body class="ifm-body">

<div class="ifm-panel">
    <h2 class="til" id="tabpanel">Tab Panel</h2>
    <div id="test_tabpane1" class="tabbox" style="z-index:3;"></div>
    <h2 class="til" id="tabpane2">Vertical Tab Panel</h2>
    <div id="test_tabpane2" class="tabbox" style="z-index:2;width:480px"></div>
    <h2 class="til" id="tabpane3">Fix tab width</h2>
    <div id="test_tabpane3" class="tabbox" style="z-index:1;"></div>
</div>
       
</div>

<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../js/ui/util.js" type="text/javascript"></script>
<script src="../js/ui/tabmenu.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    //TabMenu
    
    
    tabData = [{
        txt: 'Tab1',
        id: 1
    }, {
        txt: 'Tab2',
        id: 2,
        closable: false
    }, {
        txt: 'Tab3 with Long title',
        id: 3
    },{
        txt: 'Tab4',
        id: 4
    },{
        txt: 'Tab5',
        id: 5
    },{
        txt: 'Tab6 with Long title',
        id: 6
    },{
        txt: 'Tab7',
        id: 7
    },{
        txt: 'Tab8 423',
        id: 8
    },{
        txt: 'Tab93',
        id: 9
    },{
        txt: 'tab10',
        id: 10
    },{
        txt: 'tab16571',
        id: 11
    },{
        txt: 'tab676',
        id: 12
    },{
        txt: 'tab85',
        id: 13
    },{
        txt: 'tab95',
        id: 14
    },{
        txt: 'tab101',
        id: 15
    },{
        txt: 'tab116',
        id: 16
    }];
    //Simple Tab
    var tab1 = new Util.TabMenu($('#test_tabpane1')[0], tabData, {
        onActive: function(tab){
        }
    }, {
        width: 80,
        tabsList: true
    });
    for(var i=0;i<tab1.tabs.length;i++){
        tab1.tabs[i].panel.append('Tab Panel ' + (i+1));
    }
    
    var tab2 = new Util.TabMenu($('#test_tabpane2')[0], tabData, {
        onActive: function(tab){
        }
    },{
        tabsList:false,
        vertical:true
    });
    for(var i=0;i<tab2.tabs.length;i++){
        tab2.tabs[i].panel.append('Tab Panel ' + (i+1));
    }
    $(window).resize(function(){
        tab2.showActiveTab();
    });
    
    //Auto resize tab
    var tab3 = new Util.TabMenu($('#test_tabpane3')[0], tabData, {
        onActive: function(tab){
        }
    },{
        autoResize:true,
        autoFixtoText:false
    });
</script>
</body>
</html>
